<!--
  * 系统设置表单
  * 
  * @Author:    admin 
  * @Date:      2022-06-08 21:50:41 
    
   
  * @Copyright  jiaoyuyun.org.cn 
-->
<template>
  <a-modal :open="visible" :title="form.id ? '编辑' : '添加'" ok-text="确认" cancel-text="取消" @ok="onSubmit" @cancel="onClose">
    <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 5 }">
      <!-- <a-form-item label="商品编号" name="spId">
        <a-input v-model:value="form.spId" placeholder="请输入商品编号" />
      </a-form-item> -->
      <a-form-item label="用户头像" name="picture">
        <Upload
          accept=".jpg,.jpeg,.png,.gif"
          :maxUploadSize="1"
          buttonText="点击上传头像图片"
          :default-file-list="form.picture"
          @change="enterpriseLogoChange"
        />
      </a-form-item>
      <a-form-item label="用户昵称" name="petName">
        <a-input v-model:value="form.petName" placeholder="请输入用户昵称" />
      </a-form-item>
      <a-form-item label="性别" name="gender">
          <a-radio :value="1">男</a-radio>
          <a-radio :value="2">女</a-radio>
          <a-radio :value="0">未知</a-radio>
      </a-form-item>
       <a-form-item label="真实姓名" name="name">
        <a-input v-model:value="form.name" placeholder="请输入姓名"/>
      </a-form-item>
      <a-form-item label="学校名称" name="schoolName">
            <!-- <a-select
              placeholder="请选择学校"
              v-model:value="form.schoolId"
              show-search
              style="width: 200px"
              :options=schoolList
              :filter-option="filterOption"
              @change="handleChange"
            ></a-select> -->
        <a-select  v-model:value="form.schoolId" optionFilterProp="title" placeholder="请选择学校">
          <a-select-option v-for="item in schoolList" :key="item.schoolId" :title="item.schoolName">{{ item.schoolName }}</a-select-option>
        </a-select>
      </a-form-item>       
      <a-form-item label="专业名称" name="majorName">
        <a-select  v-model:value="form.majorId" optionFilterProp="title" placeholder="请选择专业">
          <a-select-option v-for="item in typeList" :key="item.typeId" :title="item.typeName">{{ item.typeName }}</a-select-option>
        </a-select>
       </a-form-item>     
         <a-form-item label="学号" name="schoolName">
        <a-input v-model:value="form.idCard" placeholder="请输入联系人姓名" />
      </a-form-item>   
      <a-form-item label="联系电话" name="Phone">
        <a-input v-model:value="form.Phone" placeholder="请输入联系人姓名" />
      </a-form-item>

      <!-- <a-form-item label="商品图片" name="spPic">

      <a-upload
          v-model:file-list="file"
          action="http://localhost:1024/support/sp/upload"
          list-type="picture"
          class="upload-list-inline"
        >
          <a-button>
            <upload-outlined></upload-outlined>
            图片上传
          </a-button>
        </a-upload>
      </a-form-item> -->
    </a-form>
  </a-modal>
</template>
<script setup>
  import { message,Button } from 'ant-design-vue';
  import { UploadOutlined } from '@ant-design/icons-vue';
  import Upload from '/@/components/support/file-upload/index.vue';
  import { reactive, ref } from 'vue';
  import { userApi } from '/@/api/support/user-api';
  import { rSchoolApi } from '/@/api/support/school-api';
  import { smartSentry } from '/@/lib/smart-sentry';
  import { SmartLoading } from '/@/components/framework/smart-loading';


  // emit
  const emit = defineEmits(['reloadList']);
  const queryFormState = {
        pageNum: 1,
        pageSize: 10,
    };
  //  组件
  const formRef = ref();
  const file =ref([]);
  const formDefault = {
    id: undefined,
    name: '',
    petName: '',
    picture: undefined,
    gender: '',
    idCard: '',
    schoolId:'',
    schoolName: '',
    majorId: '',
    majorName:'',
    Phone:'',
  };
  let form = reactive({ ...formDefault });
  const rules = {
    petName: [{ required: true, message: '请输入昵称' }],
    name:[{ required: true, message: '请输入姓名' }],
    phone:[{ required: true, message: '请输入联系电话' }],
  };
  // 是否展示
  const visible = ref(false);

  function showModal(rowData) {
    Object.assign(form, formDefault);
    if (rowData) {
      Object.assign(form, rowData);
    }
    visible.value = true;
    queryAll(rowData);
    querySchoolAll(queryFormState);
  }

  function onClose() {
    Object.assign(form, formDefault);
    visible.value = false;
  }
   const schoolList = ref([]); //学校列表
//    const filterOption = (input, option) => {
//   return option.schoolName.toLowerCase().indexOf(input.toLowerCase()) >= 0;
// };
// const handleChange = value => {
//   console.log(`selected ${value}`);
// };
  async function querySchoolAll(queryFormState) {
    let res = await rSchoolApi.queryPage(queryFormState);
    schoolList.value = res.data.list;
  }
  const typeList = ref([]); //角色列表
  async function queryAll() {
    let res = await userApi.queryType();
    typeList.value = res.data;
  }
  function onSubmit() {
    formRef.value
      .validate()
      .then(async () => {
        SmartLoading.show();
        try {
     
          if (form.id) {
            await userApi.updateUser(form);
          } else {
            await userApi.addUser(form);
          }
          message.success(`${form.id ? '修改' : '添加'}成功`);
          emit('reloadList');
          onClose();
        } catch (error) {
          smartSentry.captureError(error);
        } finally {
          SmartLoading.hide();
        }
      })
      .catch((error) => {
        console.log('error', error);
        message.error('参数验证错误，请仔细填写表单数据!');
      });
  }


 function enterpriseLogoChange(fileList) {
   console.info('picture'+JSON.stringify(fileList))
    form.picture = fileList;
  }

  defineExpose({
    showModal,
  });
</script>
